<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统 - 登录</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
            height: 100vh;
            display: flex;
            align-items: center;
        }
        .login-container {
            max-width: 400px;
            margin: 0 auto;
            padding: 30px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }
        .login-title {
            text-align: center;
            margin-bottom: 30px;
            color: #0d6efd;
            font-weight: bold;
        }
        .form-control:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
        .btn-login {
            background-color: #0d6efd;
            color: white;
            font-weight: bold;
            padding: 10px;
        }
        .btn-login:hover {
            background-color: #0b5ed7;
            color: white;
        }
        .error-message {
            color: #dc3545;
            font-size: 0.9rem;
            margin-top: 5px;
        }
        .school-logo {
            text-align: center;
            margin-bottom: 20px;
        }
        .school-logo img {
            max-width: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="login-container">
                <div class="school-logo">
                    <img src="https://via.placeholder.com/100x100?text=School+Logo" alt="学校Logo">
                </div>
                <h2 class="login-title">学生管理系统</h2>
                
                <form @submit.prevent="handleLogin">
                    <div class="mb-3">
                        <label for="username" class="form-label">用户名</label>
                        <input 
                            type="text" 
                            class="form-control" 
                            id="username" 
                            v-model="loginForm.username"
                            required
                            placeholder="请输入用户名"
                        >
                    </div>
                    
                    <div class="mb-3">
                        <label for="password" class="form-label">密码</label>
                        <input 
                            type="password" 
                            class="form-control" 
                            id="password" 
                            v-model="loginForm.password"
                            required
                            placeholder="请输入密码"
                        >
                    </div>
                    
                    <div class="mb-3 form-check">
                        <input 
                            type="checkbox" 
                            class="form-check-input" 
                            id="remember"
                            v-model="loginForm.remember"
                        >
                        <label class="form-check-label" for="remember">记住我</label>
                    </div>
                    
                    <div v-if="errorMessage" class="alert alert-danger">
                        {{ errorMessage }}
                    </div>
                    
                    <button type="submit" class="btn btn-login w-100" :disabled="loading">
                        <span v-if="!loading">登录</span>
                        <span v-else>
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            登录中...
                        </span>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref } = Vue;
        
        createApp({
            setup() {
                const loginForm = ref({
                    username: '',
                    password: '',
                    remember: false
                });
                
                const errorMessage = ref('');
                const loading = ref(false);
                
                const handleLogin = async () => {
                    errorMessage.value = '';
                    loading.value = true;
                    
                    try {
                        const response = await fetch('/auth/login', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify(loginForm.value)
                        });
                        
                        const data = await response.json();
                        
                        if (data.success) {
                            // 登录成功，跳转到首页
                            window.location.href = '/';
                        } else {
                            errorMessage.value = data.message || '登录失败，请检查用户名和密码';
                        }
                    } catch (error) {
                        errorMessage.value = '网络错误，请稍后再试';
                        console.error('登录错误:', error);
                    } finally {
                        loading.value = false;
                    }
                };
                
                return {
                    loginForm,
                    errorMessage,
                    loading,
                    handleLogin
                };
            }
        }).mount('#app');
    </script>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>